<template>
  <div>
    <el-button type="primary" @click="clearLog()">清空日志</el-button>
  </div>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="编号" width="180" />
    <el-table-column prop="username" label="操作用户" width="130" />
    <el-table-column prop="operation" label="操作描述" width="180" />
    <el-table-column prop="params" label="操作参数" width="130" show-overflow-tooltip/>
    <el-table-column label="响应时间" width="130" >
      <template #default="scope">
        <el-tag>{{ scope.row.time }}ms</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="method" label="操作方法" width="130" show-overflow-tooltip/>
    <el-table-column prop="ip" label="ip地址" width="130"/>
    <el-table-column prop="createTime" label="操作时间" width="180" />
  </el-table>

  <div class="demo-pagination-block">
    <el-pagination
        v-model:current-page="query.pageNum"
        v-model:page-size="query.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {ref} from "vue";
import {clearLogJs, logListJs} from "@/api/user/userinfo.js";
import {ElMessage} from "element-plus";

const tableData = ref([])

// 分页参数
const query = ref({
  pageNum: 1,
  pageSize: 5,
  total:0
})

const handleSizeChange = (val) => {
  query.value.pageSize = val
  logList()
}
const handleCurrentChange = (val) => {
  query.value.pageNum = val
  logList()
}

// 查询日志
function logList() {
  logListJs(query.value).then(res=>{
    if(res.data.code == 200000){
      console.log(res.data)
      tableData.value = res.data.data.records
      query.value.total = res.data.data.total
    }
  })
}
logList()

// 清空日志
function clearLog(){
  clearLogJs().then(res=>{
    if(res.data.code == 200000){
      ElMessage.success("清除成功")
      logList()
    }else{
      ElMessage.error("清除失败")
    }
  })
}


</script>